<template>
  <div class="login-box-content" id="MainBackgroundArea">
    <div class="login-box-content-filter" id="MainBackgroundArea"/>

    <div class="login-box-content-form">
      <div class="login-box-content-form-title">
        <img v-if="getServerBg.upPic.sysLogoMain.pic !== ''"
             :src="getServerBg.upPic.sysLogoMain.pic || require('@/assets/images/login/keqiao/blueLogo.png') " alt="图标">
      </div>

      <a-form
          :form="loginContentForm"
          @submit="(e) => finish(e, loginContentForm)"
      >

        <a-form-item v-for="(item, index) in loginFormItem" :key="index">
          <component
              :is="item.componentType"
              v-decorator="item.vDecorator ? [item.vDecorator.decoratorName, {rules: item.vDecorator.rules}] : []"
              :type="item.type"
              :htmlType="item.htmlType"
              :size="item.size"
              :placeholder="item.placeholder"
              @blur="item.vDecorator && item.vDecorator.decoratorName === 'username' && usernameOnBlur()"
          >
            <template v-if="item.slot">
              <a-icon
                  :slot="item.slot.slot"
                  :type="item.slot.type"
                  :style="item.slot.style"
              />
            </template>
            <template v-else>
              {{ item.innerText }}
            </template>

          </component>
        </a-form-item>
        <div class="login-login-content-bottom-title">
          <span>忘记密码?</span>
          <span>注册新用户</span>
        </div>
      </a-form>

    </div>

  </div>
</template>

<script>
import {mapState} from 'vuex';
import {getName} from "@/api/login/login";
import {message} from 'ant-design-vue';

export default {
  name: "LoginContent",
  props: {
    finish: {
      type: [Function],
      default: (event, loginContentForm) => ({event, loginContentForm}),
    },
    username: {
      type: [Object, String],
      default: () => undefined
    }
  },
  data() {
    return {
      loginContentForm: this.$form.createForm(this, {name: 'loginContentForm'}),
      loginFormItem: [
        {
          componentType: 'a-input',
          type: 'input',
          vDecorator: {
            decoratorName: 'username',
            rules: [
              {
                required: true,
                message: '请输入用户名!'
              }
            ]
          },
          size: 'large',
          slot: {
            componentType: 'a-icon',
            slot: 'prefix',
            type: 'user',
            style: {
              color: '#1890ff'
            }
          },
          placeholder: '请输入用户名'
        },
        {
          componentType: 'a-input',
          type: 'password',
          size: 'large',
          vDecorator: {
            decoratorName: 'password',
            rules: [
              {
                required: true,
                message: '请输入密码!'
              }
            ]
          },
          slot: {
            componentType: 'a-icon',
            slot: 'prefix',
            type: 'lock',
            style: {
              color: '#1890ff'
            }
          },
          placeholder: '请输入密码'
        },
        {
          componentType: 'a-button',
          htmlType: 'submit',
          innerText: '登陆',
          size: 'large',
        },
      ]
    }
  },
  methods: {
    async usernameOnBlur() {
      const {username} = await this.loginContentForm.getFieldsValue();
      username && username !== '' && await getName({username}).then(res => {
        const {data, detail, success} = res;
        if (data === '') {
          message.error(detail);
          return true;
        } else {
          this.$emit('update:username', username);
          success && this.loginContentForm.setFieldsValue({
            username: data
          })
        }
      })
    }
  },
  computed: {
    ...mapState([
      'getServerBg'
    ])
  }
}
</script>

<style scoped lang="less">
.login-box-content {
  width: 100%;
  min-width: 1500px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50%;
  background-image: url('~@/assets/images/login/keqiao/backgroundImg.png');

  .login-box-content-filter {
    position: absolute;
    width: 400px;
    height: 520px;
    right: 175px;
    top: 50%;
    transform: translate(0, -50%);
    filter: blur(5px);
    background-repeat: no-repeat;
    background-size: 1920px 920px;
    background-position: -1335px -187px;
    background-image: url('~@/assets/images/login/keqiao/backgroundImg.png');
  }

  .login-box-content-form {
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    width: 400px;
    height: 520px;
    right: 175px;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    // .login-box-center-form-title {
    .login-box-content-form-title{
      height: 150px;
      text-align: center;
      margin-top: 30px;

      > img {
        height: 100%;
      }
    }

    & /deep/ {
      .ant-form {
        width: 80%;
        height: calc(100% - 200px - 10px);

        .ant-btn {
          width: 100%;
          background: #1890ff;
          color: white;
          font-size: 18px;
          border-radius: 4px;
          border: 1px solid #1890ff;
        }

        .login-login-content-bottom-title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            color: black;
          }
        }
      }
    }
  }
}
</style>
